<template>
  <el-dialog
    :visible.sync="modals"
    scrollable
    :title="title"
    class="order_box"
    :closable="false"
    :mask-closable="false"
  >
    <el-form
      ref="formValidate"
      :model="formValidate"
      :rules="ruleValidate"
      label-width="75px"
      @submit.native.prevent
    >
      <el-form-item label="备注：" prop="remark">
        <el-input
          v-model="formValidate.remark"
          :maxlength="200"
          show-word-limit
          :autosize="{minRows:3,maxRows:3}"
          type="textarea"
          placeholder="订单备注"
          style="width: 100%"
        />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="cancel()">关闭</el-button>
      <el-button type="primary" @click="putRemark()">提交</el-button>
    </div>
  </el-dialog>
</template>
  
<script>
import { getOrderInfoApi, remarkOrderApi } from '@/api/onsite';
export default {
  name: 'orderMark',
  data() {
    return {
      title: '订单备注',
      formValidate: {
        remark: '',
      },
      modals: false,
      ruleValidate: {
        remark: [{ required: true, message: '请输入备注信息', trigger: 'blur' }],
      },
      send_locked: false,
    };
  },
  props: {
    orderId: Number,
    remarkType: {
      default: '',
      type: String,
    },
  },
  methods: {
    // 订单详情
    getOrderInfo() {
      getOrderInfoApi(this.orderId)
        .then(async (res) => {
          this.order_info = res;
          this.title = '订单备注：' + this.order_info.ordersn;
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    cancel(name) {
      this.modals = false;
      this.reset();
    },
    reset() {
      this.formValidate = {
        remark: '',
      };
    },
    putRemark() {
      if (this.send_locked) {
        return this.$message.error('请勿重复提交');
      }
      this.send_locked = true;
      let data = {
        id: this.orderId,
        remarkSaler: this.formValidate.remark,
      };
      this.$refs.formValidate.validate(valid => {
        if(valid){
          remarkOrderApi(data)
          .then(async (res) => {
            this.send_locked = false;
            this.$message.success('操作成功');
            this.$emit('submitOk');
            let that = this;
            setTimeout(function () {
              that.modals = false;
              that.reset();
            }, 1500);
          })
          .catch((res) => {
            this.send_locked = false;
            this.$message.error('操作失败');
          });
        }
        
      })
      
    },
  },
};
</script>
  
<style scoped lang="stylus"></style>
  